<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
			<view class="status_bar"></view>
			<view>自定义导航栏</view>
		<!-- #endif -->
		<HomeBanner :bannerList = "bannerList"></HomeBanner>
		<HomeNav></HomeNav>
		<HomeList :proList = "proList"></HomeList>
		<view class="backtop" @click = "backtop" >
		  <icon type="download" size="36"></icon>
		</view>
	</view>
</template>

<script>
	import HomeBanner from '../../components/HomeBanner/HomeBanner.vue'
	import HomeNav from '../../components/HomeNav/HomeNav.vue'
	import HomeList from '../../components/HomeList/HomeList.vue'
	import { getBannerList, getProList } from '../../api/home.js'
	export default {
		components: {
			HomeBanner,
			HomeNav,
			HomeList
		},
		methods: {
			backtop () {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		},
		onPageScroll ({scrollTop}) {
			this.flag = screenTop > 360
		},
		data() {
			return {
				bannerList: [],
				proList: [],
				count: 2,
				flag: false
			};
		},
		mounted () {
			getBannerList().then(res => this.bannerList = res.data.data)
			getProList().then(res => this.proList = res.data.data)
		},
		onPullDownRefresh () {
			getProList().then(res => {
				this.proList = res.data.data
				this.count = 2
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			getProList({ count: this.count }).then(res => {
				if (res.data.data.length === 0) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					})
				} else {
					this.proList = [ ...this.proList, ...res.data.data]
					this.count += 1
				}
			})
		}
	}
</script>

<style lang="stylus">
.status_bar 
	height var(--status-bar-height)
	width 100%;
	background-color #0f0
.backtop {
  width: 36px;
  height: 36px;
  background-color: #fff;
  position: fixed;
  bottom: 10px;
  /* #ifdef H5 */
   bottom: 60px;
  /* #endif */
  right: 10px;
  border-radius: 50%;
  transform: rotate(180deg);
}
</style>
